import React, { Component } from "react"
import {
    View,
    Text,
    StyleSheet,
    ScrollView
} from "react-native"
import navigationhelper from 'src/components/navigationhelper'
import { checkPhone, deviceHeight, deviceWidth, isIPhoneX } from "src/util"
import Layer from "src/components/Layer"
import { inject } from "mobx-react/native"
import { List, InputItem, Flex } from '@ant-design/react-native';
import NavBar from 'src/components/navBar'
import AuthFetch from '../../service/Auth'

@inject('userAuth')
export default class ReSetPassword extends Component {
    constructor(props) {
        super(props)
        this.state = {
            firstPassword: '',
            secondPassword: ''
        }
    }
    onDone = (firstPassword,secondPassword) => {
       if(!firstPassword){
            return Layer.showMsg('请先输入密码')
        }
        if(!secondPassword){
            return Layer.showMsg('请再次确认密码')
        }
        if(secondPassword != firstPassword){
            return Layer.showMsg('两次输入密码不一致')
        }
        AuthFetch.resetPassword({
            password:firstPassword,
            reset_password:secondPassword,
            token: this.props.userAuth.token
        }).then((res) => {
         if(res.status == 'success'){
           Layer.showMsg('更改成功')
           navigationhelper.goBack()
          }
        }).catch(function (error) {
            Layer.showMsg(error.message)
        })
    }
    render() {
        const {firstPassword,secondPassword} = this.state
        return (
            <View style={{ flex: 1 }}>
                <NavBar
                    back={() => { navigationhelper.goBack() }}
                    title={'重置登录密码'}
                    // leftText={'返回'}
                />
                <ScrollView >
                    <List style={{ marginTop: 20 }}>
                        <InputItem
                            style={styles.inputItem}
                            placeholder={'请输入新登录密码6-20位'}
                            // clear
                            // value={this.state.value}
                            type="password"
                            onChange={value => {
                                this.setState({
                                    firstPassword: value
                                });
                            }}>
                            <Text style={styles.leftTextStyle}>新密码</Text>
                        </InputItem>

                        <InputItem
                           type="password"
                            style={styles.inputItem}
                            placeholder={'确认新登录密码'}
                            // clear
                            // value={this.state.value}
                            onChange={value => {
                                this.setState({
                                    secondPassword: value
                                });
                            }}>
                            <Text style={styles.leftTextStyle}>确认密码</Text>
                        </InputItem>
                    </List>
                    <Flex justify='center' align='center' style={{ marginTop:200, height: 50, borderRadius: 6, marginHorizontal: 20, backgroundColor: '#EF3C3C' }}
                        onPress={() => {
                            this.onDone(firstPassword,secondPassword)
                        }}>
                     <Text style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>确定</Text>
                    </Flex>


                </ScrollView>
            </View>

        )
    }
}




const styles = StyleSheet.create({
    container: {

    },
    leftTextStyle: {
        color: '#2E2E2E',
        marginLeft: 10
    },
    inputItem: {
        fontSize: 15,
        marginTop: 2,
        marginLeft: 20,
    },
})